<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>天地图－地图API－范例－纯文字的信息窗口</title>
  <script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=001ef366a77a0f4fb4d8d89f8d72094d"></script>
  <style >
    body, html{
      width: 100%;
      height: 100%;
      margin:0;
    }
    #map{
      height:400px;
      width:100%;
    }
    .jishou,.host,.build{
      text-align: center;
      cursor: pointer;
    }
  </style>
  <script>
    var map, marker,localsearch;
    var zoom = 10 ;
    function onLoad() {
      //初始化地图对象
      map = new T.Map("map");
      //允许鼠标滚轮缩放地图
      map.enableScrollWheelZoom();
      //创建比例尺控件对象
      var scale = new T.Control.Scale();
      //添加比例尺控件
      map.addControl(scale);
      //创建缩放平移控件对象
      control = new T.Control.Zoom();
      //创建地图类型切换对象
      var ctrl = new T.Control.MapType();
      //添加控件
      map.addControl(ctrl);
      //添加缩放平移控件
      map.addControl(control);
      //设置显示地图的中心点和级别 吉首市政府为中心
      map.centerAndZoom(new T.LngLat(109.593424, 28.32429), zoom);
      var point = new T.LngLat(109.593424, 28.32429);
      var config = {
        onSearchComplete: localSearchResult //接收数据结果
      };
      //创建搜索对象
      localsearch = new T.LocalSearch(map, config);
    }

    function localSearchResult(result) {
      console.log(result.getPois())
      //解析点数据结果
      pois(result.getPois());
    }

    //解析点数据结果
    function pois(obj) {
      if (obj) {
        //显示搜索列表
        var divMarker = document.createElement("div");
        //坐标数组，设置最佳比例尺时会用到
        var zoomArr = [];
        for (var i = 0; i < obj.length; i++) {
          //闭包
          (function (i) {
            //名称
            var name = obj[i].name;
            //地址
            var address = obj[i].address;
            //坐标
            var lnglatArr = obj[i].lonlat.split(" ");
            var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
            var winHtml = "名称:" + name + "<br/>地址:" + address;
            //创建标注对象
            var marker = new T.Marker(lnglat);
            //地图上添加标注点
            map.addOverLay(marker);
            //注册标注点的点击事件
            var markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
            marker.addEventListener("click", function () {
              marker.openInfoWindow(markerInfoWin);
            });
            marker.openInfoWindow(markerInfoWin);
            zoomArr.push(lnglat);
          })(i);
        }
        //显示地图的最佳级别
        // console.log(zoomArr);
        map.setViewport(zoomArr);
      }
    }
  </script>
</head>
<body onLoad="onLoad()">
<div id="map"></div>
<div class="jishou">双江寺</div>
<div class="host">吉首市政府</div>
<div class="build">水利大厦</div>
<!--<script type="text/javascript" src="map/jquery.js"></script>  // 添加自己的-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {
    $(".jishou,.host,.build").click(function(event) {
      console.log($(this).text());
      localsearch.search($(this).text())
    });
  });
</script>
</body>
</html>
